<template>
  <div id="vehiclePath">
    <div class="container">
      <div class="vehiclePathButton">
        <el-button-group style="margin-right: 2rem">
          <el-button
            v-for="(item, index) in value1"
            size="medium"
            :type="item.type"
            :key="index"
            @click="switchingRoutes(index)"
            >{{ item.value }}</el-button
          >
        </el-button-group>
        <el-button-group style="margin-right: 2rem">
          <el-button
            v-for="(item, index) in value2"
            size="medium"
            :type="item.type"
            :key="index"
            @click="switchingRoutes2(index)"
            >{{ item.value }}</el-button
          >
        </el-button-group>

        <el-button
          size="medium"
          type="primary"
          @click="changeTime(true)"
          >前一天</el-button
        >
        <el-date-picker
          size="medium"
          style="width: 150px"
          v-model="value3"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
        <el-button
          size="medium"
          type="primary"
          @click="changeTime(false)"
          >后一天</el-button
        >
      </div>
      <h1>2023-09-26 18时 ~ 2023-09-27 18时 轨迹运行图</h1>
      <div id="echart"></div>
    </div>
  </div>
</template>

<script>
let now = new Date()
let oneDay = 24 * 900 * 1000
let value = Math.random() * 1000
export default {
  data() {
    return {
      data: [],
      value1: [
        { type: 'primary', value: '左右线' },
        { type: '', value: '左线' },
        { type: '', value: '右线' },
      ],
      value2: [
        { type: 'primary', value: '所有车辆' },
        { type: '', value: '一号轨道车' },
        { type: '', value: '二号轨道车' },
        { type: '', value: '三号轨道车' },
        { type: '', value: '四号轨道车' },
      ],
      value3: '',
    }
  },
  components: {},
  created() {
    this.joinData()
    this.value3 = new Date()
  },
  mounted() {
    this.addEcharts()
  },
  methods: {
    joinData() {
      this.data = [
        '18',
        '181',
        '182',
        '183',
        '184',
        '185',
        '19',
        '191',
        '192',
        '193',
        '194',
        '195',
        '20',
        '201',
        '202',
        '203',
        '204',
        '205',
        '21',
        '211',
        '212',
        '213',
        '214',
        '215',
        '22',
        '221',
        '222',
        '223',
        '224',
        '225',
        '23',
        '231',
        '232',
        '233',
        '234',
        '235',
        '24',
        '241',
        '242',
        '243',
        '244',
        '245',
        '01',
        '011',
        '012',
        '013',
        '014',
        '015',
        '02',
        '021',
        '022',
        '023',
        '024',
        '025',
        '03',
        '031',
        '032',
        '033',
        '034',
        '035',
        '04',
        '041',
        '042',
        '043',
        '044',
        '045',
        '05',
        '051',
        '052',
        '053',
        '054',
        '055',
        '06',
        '061',
        '062',
        '063',
        '064',
        '065',
        '07',
        '071',
        '072',
        '073',
        '074',
        '075',
        '08',
        '081',
        '082',
        '083',
        '084',
        '085',
        '09',
        '091',
        '092',
        '093',
        '094',
        '905',
        '10',
        '101',
        '102',
        '103',
        '104',
        '105',
        '11',
        '111',
        '112',
        '113',
        '114',
        '115',
        '12',
        '121',
        '122',
        '123',
        '124',
        '125',
        '13',
        '131',
        '132',
        '133',
        '134',
        '135',
        '14',
        '141',
        '142',
        '143',
        '144',
        '145',
        '15',
        '151',
        '152',
        '153',
        '154',
        '155',
        '16',
        '161',
        '162',
        '163',
        '164',
        '165',
        '17',
        '171',
        '172',
        '173',
        '174',
        '175',
      ]
    },
    randomData() {
      now = new Date(+now + oneDay)
      value = value + Math.random() * 21 - 10
      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
          Math.round(value),
        ],
      }
    },
    addEcharts() {
      var myChart = this.$echarts.init(document.getElementById('echart'))
      let option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return params
          },
          axisPointer: {
            animation: false,
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 5,
          },
          splitLine: {
            show: true,
          },
          data: this.data,
        },
        yAxis: {
          type: 'category',
          boundaryGap: [0, '100%'],
          interval: 50,
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            interval: '0',
            color: ['#ccc'],
            width: 10,
            type: 'solid',
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
          axisLabel: {
            formatter: '{value} 站台',
          },
        },
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            showSymbol: true,
            data: [1.1, 1.2, 1.3, 1.4, 2.1, 2.9, 2.5, 2.4],
          },
        ],
      }

      option && myChart.setOption(option)
    },
    switchingRoutes(index) {
      this.value1 = this.value1.map((item) => {
        return {
          type: '',
          value: item.value,
        }
      })
      this.value1[index].type = 'primary'
    },
    switchingRoutes2(index) {
      this.value2 = this.value2.map((item) => {
        return {
          type: '',
          value: item.value,
        }
      })
      this.value2[index].type = 'primary'
      console.log(this.value3)
      console.log(new Date())
    },
    changeTime(type) {
      var currentDate = this.value3
      var previousDate = new Date(currentDate)
      if (type) {
        previousDate.setDate(currentDate.getDate() - 1)
        this.value3 = previousDate
      } else {
        previousDate.setDate(currentDate.getDate() + 1)
        this.value3 = previousDate
      }
    },
  },
}
</script>

<style lang="less" scoped>
#vehiclePath {
  width: 100%;
  height: 90%;
  .container {
    width: 100rem;
    height: 48rem;
    margin-left: 30px;
    margin: 0 auto;
    margin-top: 2rem;
    .vehiclePathButton {
      margin: 0 auto;
      width: 75%;
      margin-bottom: 2rem;
    }
    h1 {
      text-align: center;
    }
    #echart {
      width: 100%;
      height: 80%;
    }
  }
}
</style>
